<template>
    <div class="register-box">
    <media :query="{maxWidth: 768}">
        <div class="register-logo">
            <img src="../assets/img/logo.png" alt="">
        </div>
    </media>
    <div class="login-toggle">
        <div class="login-title" :class="{'active':ActiveShow==0}" @click="LoginWaysToggle(0)">密码登录</div>
        <!-- <div class="login-title" :class="{'active':ActiveShow==1}" @click="LoginWaysToggle(1)">快捷登录</div> -->
    </div> 
     <!--密码登录  -->
    <div class="register-form" v-if="ActiveShow==0">
      <div class="register-field">
        <i class="field-icon field-icon-account"></i>
        <input type="text" v-model.trim="Phone" maxlength="11" placeholder="请输入手机号">
      </div>  
      <div class="register-field">
        <i class="field-icon field-icon-password"></i>
        <input type="password" v-model="Password" placeholder="请输入登录密码">
      </div>
      <div class="forget-password">
          <a href="javascript:;" @click="ResetPassword">忘记密码</a>
      </div>
      <button class="register-btn" @click="LoginByPassword">登录</button>
      <div class="otherways-login">
        <p class="otherways-title">
          <i></i>
          <span>使用其他方式登录</span>
          <i></i>
        </p>
        <div class="otherways-link">
          <a class="weixin-login" href="javascript:;" @click="weixinLogin"></a>
          <!-- <a class="qq-login" href="javascript:;"></a>
          <a class="sina-login" href="javascript:;"></a>-->
        </div>
        <div class="login-link">
          <p>
            <span>我还没有帐号，</span>
            <a href="#/register">我要注册</a>
          </p>
        </div>
      </div>
    </div>
    <!-- 快捷登录 -->
    <!-- <div class="register-form" v-if="ActiveShow==1">
      <div class="register-field">
        <i class="field-icon field-icon-account"></i>
        <input type="text" v-model.trim="Phone" maxlength="11" placeholder="请输入手机号">
      </div>  
      <div class="register-field">
        <i class="field-icon field-icon-phone"></i>
        <input type="text" v-model.trim="VerifyCode" placeholder="请输入短信验证码">
        <div class="code-btn">
          <button :disabled="CodeBtnDisabled" @click="getVerifyCode">{{CodeBtnText}}</button>
        </div>
      </div>
      <button class="register-btn" @click="LoginByCode">登录</button>
      <div class="otherways-login">
        <p class="otherways-title">
          <i></i>
          <span>使用其他方式登录</span>
          <i></i>
        </p>
        <div class="otherways-link">
          <a class="weixin-login" href="javascript:;" @click="weixinLogin"></a>
          <a class="qq-login" href="javascript:;"></a>
          <a class="sina-login" href="javascript:;"></a>
        </div>
        <div class="login-link">
          <p>
            <span>我还没有帐号，</span>
            <a href="#/register">我要注册</a>
          </p>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import $ from 'jquery';
import Media from 'vue-media';
export default {
    data() {
        return {
            Phone: '',
            Password: '',
            VerifyCode: '',
            ActiveShow: 0,
            CodeBtnText: '获取验证码',
            CodeBtnDisabled: false
        };
    },
    components: {
        Media
    },
    methods: {
        LoginWaysToggle(index) {
            if (this.ActiveShow != index) {
                this.ActiveShow = index;
            }
        },
        LoginByPassword() {
          if (this.Phone == '') {
          this.$toast('请输入手机号');
        } else if (this.Password == '') {
          this.$toast('请输入登录密码');
        } else {
          var that = this;
          $.ajax({
            type: 'POST',
            url: `${that.baseUrl}/api/Register/login`,
            data: {
              Account: that.Phone,
              Password: that.Password
            },
            success: function(res) {
              if (res.State) {
                that.$cookies.set('token', res.Data, 8 * 60 * 60);
                localStorage.setItem('token', res.Data);
                that.$store.commit('SET_TOKEN', res.Data);
                window.location.href = decodeURIComponent(that.$route.query.ReferrerUrl);
              }else {
                that.$toast(res.Message);
              }
            }
          });
        }
        },
        ResetPassword() {
          if (this.Phone) {
            window.location.href = '#/reset?phone=' + this.Phone;
          } else {
            window.location.href = '#/reset';
          }
        },
        // LoginByCode() {

        // },
        // getVerifyCode() {

        // },
        weixinLogin() {
          let ua = window.navigator.userAgent.toLowerCase();
          if (/iPhone|iPod|Android|ios|SymbianOS/i.test(ua)) {
            // 手机端
            window.location.href = `#/qrcode?ReferrerUrl=${this.$route.query.ReferrerUrl}`;
          } else {
            // pc端
            window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx0e89055f8943b237&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
          }
        }
    }
};
</script>

